<template>
  <div class="container">
    <div class="top">
      <el-form :inline="true" :model="pageParam" class="demo-form-inline">
        <el-form-item label="患教名称">
          <el-input
            v-model="pageParam.name"
            placeholder="请输入患教活动的名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="主持人">
          <el-input v-model="pageParam.host" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select
            v-model="pageParam.status"
            placeholder="请选择活动状态"
            clearable
            style="width: 140px"
          >
            <el-option label="请选择" :value="-1" />
            <el-option label="未开始" :value="0" />
            <el-option label="已开始" :value="1" />
            <el-option label="已结束" :value="2" />
            <el-option label="已取消" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="报名开始时间">
          <el-date-picker
            v-model="pageParam.signUpStartTime"
            type="date"
            placeholder="Pick a date"
            clearable
          />
        </el-form-item>
        <el-form-item label="报名结束时间">
          <el-date-picker
            v-model="pageParam.signUpEndTime"
            type="date"
            placeholder="Pick a date"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addClick">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="down">
      <div class="patient-count">活动记录（共{{ patientTotal }}条记录）</div>
      <el-table  :data="tableData" style="width: 100%; height: 85%;" @selection-change="handleSelectionChange">
        <el-table-column fixed="left" type="selection" width="55" />
        <el-table-column  prop="name" label="患教名称" width="150" />
        <el-table-column prop="count" label="参加人数" width="120" />
        <el-table-column prop="liveTime" label="直播时间" width="120" />
        <el-table-column prop="signupStartTime" label="报名开始时间" width="120" />
        <el-table-column prop="signupEndTime" label="报名结束时间" width="120" />
        <el-table-column prop="money" label="活动金额" width="120" />
        <el-table-column prop="host" label="主持人" width="120" />
        <el-table-column prop="viewingRate" label="观看率" width="120" />
        <el-table-column prop="status" label="活动状态" width="120" />
        <el-table-column prop="cancelTime" label="取消时间" min-width="120"/>
        <el-table-column prop="endTime" label="结束时间" min-width="120"/>
        <el-table-column prop="cancelReason" label="取消理由" width="120" />
        <el-table-column fixed="right" width="150">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="selectClick(scope.row.id)">
              查看
            </el-button>
            <el-button link type="primary" size="small" @click="editClick(scope.row.id)">编辑</el-button>
            <el-button link type="primary" size="small" @click="deleteClick(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :size="size"
      :total="pageSize"
      background layout="total, sizes, prev, pager, next, jumper" />
    </div>
    <el-dialog v-model="dialogVisible"  :title="updateOrEdit?'新增':'编辑'" width="750">
        <DialogEdit v-if="dialogVisible" @activityValue="activityFrom" @callBack="callBackFun" :data="updateOrEdit" :id="updateId" />
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addOrUpdatePatient">
            确定
            </el-button>
        </div>
        </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {patientList, deleteActivity, updateActivity,addActivity } from "@/api/patient/patient"
import { ElMessage, ElMessageBox } from "element-plus";
import DialogEdit from "./components/DialogEdit.vue";
const tableData = ref([]);
import router from "@/router";



//前端传给后端的参数，模糊条件查询
const pageParam = ref({
  page: 1,
  size: 10,
  name: '',
  host: '',
  status: -1,
  signUpStartTime: '',
  signUpEndTime: '',
})
const actFrom = ref(null)

const updateOrEdit = ref(-1)
const search = () => {
  getPatientList()
}
//活动的总数total
const patientTotal = ref(0)
const pageSize = ref(0)
const currentPage = ref(1)
const size = ref(1)
//获取活动列表
const getPatientList = () => {
  patientList(pageParam.value).then((res) => {
    tableData.value = res.data.list
    patientTotal.value = res.data.total
    pageSize.value = res.data.totalPage
    console.log("totalpage"+pageSize.value)
    currentPage.value = pageParam.value.page
    size.value = pageParam.value.size
  })
}
const handleSizeChange = (val) => {
  pageParam.value.size = val
  getPatientList()
}
const handleCurrentChange = (val) => {
  pageParam.value.page = val
  getPatientList()
}
/**
 * 删除患者
 */
const deleteClick = (id) => {
    ElMessageBox.confirm(
      '确定要删除当前数据吗？',
      '删除提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() =>{
      deleteActivity(id).then((res) => {
        if(res.code == 200){
          ElMessage({
            type: 'success',
            message: '删除成功', 
          })
          getPatientList()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })       
}
/** 编辑 */
const dialogVisible = ref(false)

const updateId = ref(0)
const editClick = (id) => {
  dialogVisible.value = true
  //向子组件传值
  updateOrEdit.value = 0
  updateId.value = id
}
/** 新增 */
const addClick = () => {
  dialogVisible.value = true
  //向子组件传值
  updateOrEdit.value = 1

}
const activityFrom = (v) => {
  actFrom.value = v;
}
//判断是新增还是编辑
//编辑时候updateOrEdit，传1表示新增，传0表示编辑
const addOrUpdatePatient = () => {
  if(updateOrEdit.value === 0){
    updatePatient()
  }
  if(updateOrEdit.value === 1){
    addPatient()
  }
  getPatientList()
}
//更新患教活动
const updatePatient = () => {
    updateActivity(actFrom.value).then((res) => {
        if(res.code == 200){
            ElMessage({
                type: 'success',
                message: '更新患教活动成功',
            })
            getPatientList()
            dialogVisible.value = false
        }
    })
}
//新增患教活动
const addPatient = () => {
    addActivity(actFrom.value).then((res) => {
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '新增患教活动成功',
            })
            dialogVisible.value = false
        }
    })  
}
/** 查询详情 */
const selectClick = (id) => {
  router.push(
        {
          path:'/index/patienEduQuery',  //使用path路径注意路径要正确
          name: 'patienEduQuery',
          query: {
            id:id
          }
        });
}
//接收子组件传值
const callBackFun = (e) => {
    dialogVisible.value = e;
}
const multipleSelection = ref(0)
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
onMounted(() => {
  getPatientList()
})
</script>

<style  lang="less" scoped>
.container {
  height: 100%;
  .top {
    padding-top: 20px;
    height: 17%;
    background-color: rgb(255, 252, 247);
  }
  .down {
    height: 75%;
  }
}
.patient-count{
  margin: 15px;
  font-size: 20px;
  font-weight: bolder;

}
:deep(.el-table__header-wrapper){
  th{
    background-color: #f8f8f8;
    color: #000;
  }
  
}
</style>